var DormSetting = function () {
  var template = /*html*/ `
    <div class="dorm-setting" v-loading.fullscreen.lock="loading">
      <el-container style="height:100%;">
        <el-aside class="dorm-form-content" width="30%">
          <dorm-setting-form :dorm="dorm" type="update" :ele-energys="eleEnergys" :water-energys="waterEnergys" :employees="employees" 
            @add-drom="openAddDormForm" @update-success="updateDormSuccess" @delete-success="deleteDormSuccess"></dorm-setting-form>
        </el-aside>
        <el-main class="dorm-table-div">
          <div class="dorm-table-content">
            <el-table class="dormTable" fit border stripe :data="dorms" ref="dormTable" @row-click="toUpdateDorm" height="parent">
              <el-table-column :resizable="false" prop="dormNo" label="宿舍号码"></el-table-column>
              <el-table-column :resizable="false" label="电表号" auto-width>
                <template slot-scope="scope">
                  <span>{{getData(scope.row,'energy.no')}}</span>
                </template>
              </el-table-column>
              <el-table-column :resizable="false" label="水表号" auto-width>
                <template slot-scope="scope">
                  <span>{{getData(scope.row,'water.no')}}</span>
                </template>
              </el-table-column>
              <el-table-column v-for="index in maxEmpNum" :key="'emp_'+index" :resizable="false" :label="'员工'+index">
                <template slot-scope="scope">
                  <span>{{getData(scope.row,'userList['+(index-1)+'].userName')}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="pagination.totalCount!==0" style="text-align:right;margin-top:10px;">
            <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
              @current-change="pageChange"></el-pagination>
          </div>
        </el-main>
      </el-container>

      <el-dialog title="添加宿舍" :visible.sync="addDormFormDialog" :lock-scroll="true" :show-close="true" top="20px" custom-class="sysAddFormDialog">
        <div style="height: 400px;padding-left:20px;overflow: auto;" v-if="addDormFormDialog">
          <dorm-setting-form :dorm="addDormItem" type="create" :ele-energys="eleEnergys" :water-energys="waterEnergys" :employees="employees" 
            @add-success="addDormSuccess"></dorm-setting-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    data: function () {
      return {
        loading: false,
        eleEnergys: [],
        waterEnergys: [],
        employees: [],
        addDormFormDialog: false,
        addDormItem: {},
        dorms: [],
        maxEmpNum: 0,
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        dorm: {
          id: '',
          dormNo: '',
          eleEnergyId: '',
          waterEnergyId: '',
          employeeIds: []
        }
      };
    },
    created: function () {
      this.setEnergy();
      this.setEmployees();
      this.setDorms();
    },
    methods: {
      setEnergy: function () {
        var self = this;
        this.loading = true;
        ajaxRequest('dormManage/getEnergyAndWaterByDetail').then(function (energys) {
          self.loading = false;
          var eleEnergys = _.filter(energys, {
            energyType: 1
          });
          self.eleEnergys = eleEnergys;

          var waterEnergys = _.filter(energys, {
            energyType: 2
          })
          self.waterEnergys = waterEnergys;
        }).catch(function () {
          self.loading = false;
        });
      },

      setEmployees: function () {
        var self = this;
        this.loading = true;
        ajaxRequest('dormManage/getAllUserOnIdAndName').then(function (employees) {
          self.loading = false;
          self.employees = employees;
        }).catch(function () {
          self.loading = false;
        });
      },

      setDorms: function () {
        var pagination = this.pagination;
        var postData = {
          currentPage: pagination.currentPage,
          pageSize: pagination.pageSize,
          status: "1"
        };

        var self = this;
        this.loading = true;
        ajaxRequest('dormManage/getDormManageByDetail', postData).then(function (res) {
          self.loading = false;
          var dorms = res.returnData;
          var nums = _.map(dorms, function (dorm) {
            var userList = dorm.userList;
            if (userList === undefined) {
              return 0;
            }
            return userList.length;
          });
          self.maxEmpNum = _.max(nums);
          self.dorms = dorms;
          self.pagination.totalCount = res.iTotalRecords;
        }).catch(function () {
          self.loading = false;
        });
      },

      pageChange: function () {
        this.setDorms();
      },

      toUpdateDorm(selectDorm) {
        var dorm = {
          id: selectDorm.id,
          dormNo: selectDorm.dormNo,
          eleEnergyId: this.getData(selectDorm, 'energy.id'),
          waterEnergyId: this.getData(selectDorm, 'water.id'),
          defaultElectricFee: selectDorm.defaultElectricFee,
          defaultWaterFee: selectDorm.defaultWaterFee
        };

        var userList = selectDorm.userList;
        if (userList === undefined) {
          userList = [];
        }
        var employeeIds = _.map(userList, 'id');
        dorm.employeeIds = employeeIds;
        this.dorm = dorm;
      },

      openAddDormForm: function () {
        this.addDormFormDialog = true;
        this.addDormItem = {
          defaultElectricFee: 0.55,
          defaultWaterFee: 2.80
        };
      },

      addDormSuccess: function () {
        this.addDormFormDialog = false;

        this.pagination.currentPage = 1;
        this.setEnergy();
        this.setEmployees();
        this.setDorms();
      },

      updateDormSuccess: function () {
        this.setEnergy();
        this.setEmployees();
        this.setDorms();
      },
      deleteDormSuccess: function () {
        var dorm = {
          id: '',
          dormNo: '',
          eleEnergyId: '',
          waterEnergyId: '',
          employeeIds: []
        };
        this.dorm = dorm;
        this.setEnergy();
        this.setEmployees();
        this.setDorms();
      },

      addDormDialogClose: function () {
        this.addDormItem = {};
      },

      getData(obj, field) {
        var value = _.get(obj, field, '');
        if (value === null) {
          value = '';
        }
        return value;
      }
    },
    template: template,
    components: {
      DormSettingForm: DormSettingForm
    }
  };
}();
